<template>
  <a-modal v-model="visiable" :width="800" @ok="submit" @cancel="handleCancel">
    <div style="margin-top: 20px;">
      <a-tabs :activeKey="current" @change="tabChange">
        <a-tab-pane :key="index" :tab="item.companyName" v-for="(item, index) in tabList"></a-tab-pane>
      </a-tabs>
    </div>
    <j-form-container>
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="总账户" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="settlementAmount" placeholder="请输入总账户" :disabled="true"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="账户变动" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="settlementAmount">
              <a-input-number style="width: 100%" v-model="model.settlementAmount"
                placeholder="请输入账户的变动金额，负数为减少"></a-input-number>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="账户变动备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="changeRemarks">
              <a-input v-model="model.changeRemarks" placeholder="请输入账户变动备注"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="备注图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="img">
              <div style="position: relative">
                <a-upload :action="getUploadAction()" :headers="uploadGetHeaders()" :before-upload="beforeUpload"
                  list-type="picture-card" :file-list="fileList" @preview="handlePreview" @change="handleChange">
                  <div v-if="fileList.length < 1">
                    <a-icon type="plus" />
                    <div class="ant-upload-text">Upload</div>
                  </div>
                </a-upload>
              </div>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-modal>
</template>
  
<script>
import { getAction, postAction } from '@/api/manage'
export default {
  name: 'changeAccount',
  data() {
    return {
      visiable: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      model: {
        settlementAmount: '',
        changeRemarks: '',
      },
      validatorRules: {
        settlementAmount: [{ required: true, message: '请输入账户变动金额，负数为减少!!' }],
      },
      settlementAmount: '',
      fileList: [],
      previewImage: '',
      previewVisible: '',

      tabList: [{ companyName: '用户账户' }],
      current: 0
    }
  },
  mounted() {
  },
  methods: {
    show(record) {
      console.log('1111111')
      this.visiable = true
      this.settlementAmount = record.settlementAmount
      this.model.merchantId = record.id
      this.getCompanyList();
    },
    //获取所有公司列表
    async getCompanyList() {
      let res = await getAction('/hc/hcCompanyMerchantInfo/queryCompanyListByMerchantId', { pageSize: 999999, pageNo: 1, merchantId: this.model.merchantId });
      console.log('this.tabList', this.tabList);
      this.tabList = [...this.tabList, ...res.result];
      console.log('this.tabList', this.tabList);
    },
    handleCancel() {
      this.visiable = false;
      this.current = 0;
      this.fileList = [];
      this.tabList=[{ companyName: '用户账户' }];
    },
    /** 上传请求地址 */
    getUploadAction(value) {
      if (!value) {
        return window._CONFIG['domianURL'] + '/sys/common/upload'
      } else {
        return value
      }
    },
    uploadGetHeaders() {
      let headers = {}
      headers['X-Access-Token'] = JSON.parse(localStorage.getItem('pro__Access-Token')).value
      return headers
    },
    beforeUpload() {
      // return false
    },
    async handlePreview(file) {
      console.log('6666')
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    handleChange({ fileList }) {
      this.fileList = fileList
    },
    submit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (this.fileList.length != 0) this.model.picture = this.fileList[0].response.message;
          let res;
          if (this.current === 0) {
            this.model.companyId = ''
            res = await postAction('/hc/hcMerchantSettlement/add', this.model)
          } else {
            this.model.companyId = this.tabList[this.current].id
            res = await postAction('/hc/hcCompanyMerchantSettlement/add', this.model)
          }
          console.log('res', res)
          if (res.success) {
            this.$message.success(res.message)
            this.model = {}
            this.settlementAmount = '';
            this.fileList = [];
            this.$emit('loadData')
            this.handleCancel()
          } else {
            this.$message.warning(res.message)
          }
        }
      })
    },
    async getInfo() {
      let res;
      if (this.current === 0) {
        res = await getAction('hc/hcMerchantSettlement/querySumByIdNew', { merchantId: this.model.merchantId })
      } else {
        res = await getAction('/hc/hcCompanyMerchantSettlement/querySumByMerchantIdAndCompanyId', { merchantId: this.model.merchantId, companyId: this.tabList[this.current].id })
      }
      this.settlementAmount = res.result.all
    },
    tabChange(e) {
      this.current = e;
      this.getInfo()
    }
  },
}
</script>
  
<style lang="scss" scoped>
.avatar-uploader {
  width: 150px;
}

.ant-upload {
  width: 100% !important;
}

.ant-upload img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
</style>